<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title" style="font-size:25px">优文共享社区</span>

        <span class="spacer"></span>

    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <!-- <h2>第15组-谢嘉庆-朱立檬-2023/8/30</h2> -->
            <h2>登陆</h2>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <span>验证码</span>
                <input id="code_input" style="width: 80px;">&nbsp;&nbsp;
                <img onclick="refreshCode()" id="codeimg" style="display:none;height: 50px;width: 130px;">
            </div>
            <div class="row">
                <button id="submit" onclick="mysub()">登陆</button>
            </div>
            <div class="row">
                <a href="reg.html" style="font-size: 20px;">没有账号？点击注册</a>
            </div>
            <div class="row">
                <a href="blog_list.html" style="font-size: 20px;">游客模式登陆</a>
            </div>
        </div>
    </div>
    <script>
        // 加载验证码
        function initCode() {
            jQuery.ajax({
                url: "/user/getcode",
                type: "POST",
                data: {},
                success: function (res) {
                    if (res.code == 200 && res.data.length > 0) {
                        jQuery("#codeimg").attr("src", res.data);
                        jQuery("#codeimg").show();
                    }
                }
            });
        }
        initCode();

        function refreshCode() {
            initCode();
        }
        function mysub() {
            //非空校验
            var username = jQuery("#username");
            var password = jQuery("#password");
            var code = jQuery("#code_input");
            if (username.val() == "") {
                alert("请先输入用户名！");
                username.focus();
                return;
            }
            if (password.val() == "") {
                alert("请先输入密码！");
                password.focus();
                return;
            }
            if (code.val() == "") {
                alert("请先输入验证码！");
                code.focus();
                return;
            }
            //ajax请求
            jQuery.ajax({
                url: "/user/login",
                type: "POST",
                data: { "username": username.val(), "password": password.val(), "code": code.val() },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data != null) {
                        //登录成功，跳转页面
                        location.href = "/myblog_list.html";
                    } else if (result != null && result.code == -1 && result.msg == "验证码有误") {
                        alert("你输入的验证码有误！请重试!");
                    } else {
                        alert("您输入的用户名或密码有误!请重新输入！");
                    }
                }
            });
        }
    </script>
</body>

</html>